<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1, maximum-scale=1" />
<title>Quark Framework Example - simple</title>

<style type="text/css">
body{margin:0;padding:0;font-size:12px;background-color:#eee;}
</style>

<script type="text/javascript" src="../js/quark.base-1.0.0.js"></script>

</head>

<body>

<div id="container" style="position:absolute;left:0;top:0;width:480px;height:320px;background-color:#fff;"></div>
<div id="fps" style="position:absolute;left:0;top:0;"></div>
<img id="girl" src="images/girl.png" style="display:none;" />
<img id="boy" src="images/boy.png" style="display:none;" />

<script type="text/javascript">

window.onload = init;

var container, stage, context, girl, boy, width, height, timer, fps, events, params;
var bmp1, bmp2, mc;

function init()
{
	container = Quark.getDOM("container");
	girl = Quark.getDOM("girl"),
	boy = Quark.getDOM("boy");
	events = Quark.supportTouch ? ["touchend"] : ["mouseup"];

	params = Quark.getUrlParams();
	if(params.mode == undefined) params.mode = 2;
	
	width = 480;
	height = 320;
	fps = 60;
	
	if(params.mode == 1)
	{
		var canvas = Quark.createDOM("canvas", {width:width, height:height, style:{position:"absolute",backgroundColor:"#fff"}});		
		container.appendChild(canvas);
		context = new Quark.CanvasContext({canvas:canvas});		
	}else
	{
		context = new Quark.DOMContext({canvas:container});
	}		
	
	start();
}

function start()
{	
	stage = new Quark.Stage({width:width, height:height, context:context, update:update});	

	bmp1 = new Quark.Bitmap({image:girl, rect:[0,0,64,85], regX:32, regY:42});
	bmp1.rotation = 0;
	bmp1.x = 300;
	bmp1.y = 100;
	bmp1.enabled = true;
	bmp1.addEventListener(events[0], function(e)
	{
		bmp1.enabled = !bmp1.enabled;
	});
	
	bmp2 = new Quark.Bitmap({image:boy, rect:[0,0,64,85], regX:32, regY:42});
	bmp2.x = 100;
	bmp2.y = 100;
	bmp2.scaleX = 2;
	bmp2.scaleY = 2;
	bmp2.addEventListener(events[0], function(e)
	{
		bmp2.scaleX = bmp2.scaleY = bmp2.scaleX == 1? 2 : 1;
		trace(e, e.type, e.eventX, e.eventY)
	});
	
	mc = new Quark.MovieClip({image:girl, interval:50});
	mc.addFrame([
	{rect:[0,0,64,85], label:"stand", stop:1},
	{rect:[192,0,64,85], label:"walk"},
	{rect:[192,85,64,85], jump:"walk"},
	{rect:[320,0,64,85], label:"cheer"},
	{rect:[384,0,64,85]},
	{rect:[448,0,64,85], jump:"cheer"}]);
	mc.x = 150;
	mc.y = 150;
	mc.gotoAndPlay("walk");
	mc.addEventListener(events[0], function(e)
	{
		mc.paused = !mc.paused;
	});

	stage.addChild(bmp1, bmp2, mc);
	
	setTimeout(function(){mc.visible=false;}, 2000);
	setTimeout(function(){mc.visible=true;}, 4000);
	
	var em = new Q.EventManager();
	em.registerStage(stage, events);

	timer = new Q.Timer(1000/fps);
	timer.addListener(stage);
	timer.addListener(Q.Tween);
	timer.start();
}

function update()
{
	frames++;
	if(bmp1 && bmp1.enabled) bmp1.rotation += 5;
}

var frames = 0, fpsContainer = Quark.getDOM("fps");
setInterval(function()
{
	fpsContainer.innerHTML = "FPS:" + frames;
	frames = 0;
}, 1000);

</script>

</body>
</html>